<template>
    <div class="admin-layout">
        <el-container>
            <el-aside :width="isCollapse ? '64px' : '220px'" class="admin-aside">
                <div class="logo-container">
                    <h2 class="system-title">云盘管理系统</h2>
                </div>
                <el-menu :default-active="activeMenu" class="admin-menu" router background-color="#304156"
                    text-color="#bfcbd9" active-text-color="#409EFF" :collapse="isCollapse">
                    <el-menu-item index="/admin/dashboard">
                        <el-icon>
                            <DataBoard />
                        </el-icon>
                        <span>仪表盘</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/users">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="/admin/files">
                        <el-icon>
                            <Document />
                        </el-icon>
                        <span>文件管理</span>
                    </el-menu-item>
                    <el-menu-item index="/cloud">
                        <el-icon>
                            <Back />
                        </el-icon>
                        <span>返回前台</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>

            <el-container>
                <el-header class="admin-header">
                    <div class="header-left">
                        <el-icon class="toggle-icon" @click="toggleSidebar">
                            <Menu />
                        </el-icon>
                        <span class="current-page">{{ getCurrentPageTitle() }}</span>
                    </div>
                    <div class="header-right">
                        <el-dropdown trigger="click">
                            <div class="user-info">
                                <!-- <el-avatar :size="32" icon="el-icon-user" /> -->
                                <el-icon :size="25">
                                    <User />
                                </el-icon>
                                <span>管理员</span>
                                <el-icon>
                                    <ArrowDown />
                                </el-icon>
                            </div>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="goToProfile">个人信息</el-dropdown-item>
                                    <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </div>
                </el-header>

                <el-main class="admin-main">
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Menu, DataBoard, User, Document, Back, ArrowDown } from '@element-plus/icons-vue'
import list from '@/utils/url'
import http from '@/utils/request'

const route = useRoute()
const router = useRouter()

// 计算当前激活的菜单项
const activeMenu = computed(() => route.path)

// 获取当前页面标题
const getCurrentPageTitle = () => {
    const path = route.path
    if (path.includes('/dashboard')) return '仪表盘'
    if (path.includes('/users')) return '用户管理'
    if (path.includes('/files')) return '文件管理'
    return '云盘管理系统'
}

// 侧边栏折叠状态
const isCollapse = ref(false)

// 切换侧边栏折叠状态
const toggleSidebar = () => {
    isCollapse.value = !isCollapse.value
}

// 跳转到个人信息页面
const goToProfile = () => {
    // 实际项目中应该跳转到个人信息页面
    ElMessage.info('个人信息功能开发中')
}

// 处理退出登录
const handleLogout = () => {
    ElMessageBox.confirm(
        '确定要退出登录吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            http.get(list.list_user_api.logout).then((res) => {
                // 清除登录状态
                localStorage.removeItem('token')
                // 清除用户信息
                localStorage.removeItem('role')
                localStorage.removeItem('username')

                // 跳转到登录页面
                router.push('/login')
                ElMessage.success('已退出登录')
            }).catch((err) => {
                router.push('/login')
            })
        })
        .catch((err) => {
            // 取消退出
            ElMessage.info('操作取消')
        })
}
</script>

<style scoped>
.admin-layout {
    height: 100vh;
    overflow: hidden;
}

.admin-aside {
    background-color: #304156;
    transition: width 0.3s;
    overflow-x: hidden;
}

.logo-container {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background-color: #263445;
    padding: 0 15px;
}

.system-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-menu {
    border-right: none;
    height: calc(100vh - 60px);
}

.admin-header {
    background-color: #fff;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 60px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.header-left {
    display: flex;
    align-items: center;
}

.current-page {
    margin-left: 15px;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
}

.toggle-icon {
    font-size: 20px;
    cursor: pointer;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.admin-main {
    background-color: #f0f2f5;
    padding: 20px;
    overflow-y: auto;
    height: calc(100vh - 60px);
}
</style>